<template>
  <div class="announcements-container">
    <div class="announcements-header">
      <h1 class="page-title">公告中心</h1>
      <p class="page-description">查看所有关于京剧苑的最新公告和动态</p>
    </div>

    <div class="announcements-content">
      <!-- 公告列表 -->
      <div v-if="announcements && announcements.length > 0" class="announcements-list">
        <div 
          v-for="(announcement, index) in announcements" 
          :key="index" 
          class="announcement-card"
          @click="showAnnouncementDetail(announcement)"
        >
          <div class="announcement-card-content">
            <div class="announcement-icon">
              <i class="el-icon-bell"></i>
            </div>
            <div class="announcement-info">
              <div class="announcement-title">{{ announcement.title || '未命名公告' }}</div>
              <div class="announcement-date">{{ formatAnnouncementDate(announcement.updateTime) }}</div>
              <div class="announcement-preview" v-if="announcement.content">
                {{ getContentPreview(announcement.content) }}
              </div>
            </div>
            <div class="announcement-arrow">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination-container">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
      
      <!-- 加载中状态 -->
      <div v-else-if="loading" class="announcements-loading">
        <div v-for="i in 5" :key="i" class="skeleton-announcement-card">
          <div class="skeleton-announcement-content">
            <div class="skeleton-icon"></div>
            <div class="skeleton-info">
              <div class="skeleton-title"></div>
              <div class="skeleton-date"></div>
              <div class="skeleton-preview"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 无数据状态 -->
      <div v-else class="no-announcements">
        <i class="el-icon-info-circle"></i>
        <p>暂无公告信息</p>
      </div>
    </div>

    <!-- 公告详情对话框 -->
    <el-dialog
      :title="currentAnnouncement.title || '公告详情'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleDialogClose"
    >
      <div class="announcement-dialog-content">
        <div v-if="currentAnnouncement.loading" class="announcement-loading">
          <div class="announcement-loading-spinner">
            <i class="el-icon-loading"></i>
          </div>
          <div class="announcement-loading-text">加载中...</div>
        </div>
        
        <template v-else>
          <div class="announcement-dialog-date">
            <i class="el-icon-date"></i> {{ formatAnnouncementDate(currentAnnouncement.updateTime) }}
          </div>
          <div class="announcement-dialog-body" v-if="currentAnnouncement.content" v-html="currentAnnouncement.content"></div>
          <div class="announcement-dialog-body" v-else>暂无内容</div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request';

export default {
  name: 'AnnouncementsVue',
  data() {
    return {
      announcements: [],
      loading: true,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      currentAnnouncement: {}
    }
  },
  created() {
    document.title = '京剧苑 - 公告中心';
    this.fetchAnnouncements();
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  methods: {
    // 获取公告列表
    fetchAnnouncements() {
      this.loading = true;
      service.get('/api/system/announcement/getAnnouncements')
        .then(res => {
          if (res.code === 200) {
            if (Array.isArray(res.data)) {
              // 按照updateTime字段降序排序（最新的在前）
              const sortedAnnouncements = res.data.sort((a, b) => {
                return new Date(b.updateTime) - new Date(a.updateTime);
              });
              
              this.announcements = sortedAnnouncements;
              this.total = sortedAnnouncements.length;
            } else {
              this.announcements = [];
              this.total = 0;
            }
          } else {
            this.announcements = [];
            this.total = 0;
          }
        })
        .catch(() => {
          this.announcements = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 格式化公告日期
    formatAnnouncementDate(dateString) {
      if (!dateString) return '未知时间';
      
      try {
        const date = new Date(dateString);
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          return '未知时间';
        }
        
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        
        return `${year}年${month}月${day}日 ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      } catch (error) {
        return '未知时间';
      }
    },
    
    // 获取内容预览
    getContentPreview(content) {
      if (!content) return '';
      
      // 去除HTML标签后截取前50个字符作为预览
      const plainText = content.replace(/<[^>]+>/g, '');
      return plainText.length > 50 ? plainText.substring(0, 50) + '...' : plainText;
    },
    
    // 显示公告详情对话框
    showAnnouncementDetail(announcement) {
      this.currentAnnouncement = { ...announcement, loading: false };
      this.dialogVisible = true;
    },
    
    // 关闭对话框
    handleDialogClose(done) {
      // 复位当前公告对象
      setTimeout(() => {
        this.currentAnnouncement = {};
      }, 300);
      done();
    },
    
    // 分页切换
    handleCurrentChange(val) {
      this.currentPage = val;
      // 如果有分页API，这里可以调用获取对应页的数据
      // 由于目前是前端分页，所以不需要额外处理
    }
  }
}
</script>

<style scoped>
.announcements-container {
  padding: 2rem 10%;
  min-height: calc(100vh - 300px);
}

.announcements-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-title {
  font-size: 2.8rem;
  color: #8B0000;
  margin-bottom: 1rem;
  font-family: 'STZhongsong', serif;
}

.page-description {
  font-size: 1.2rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

.announcements-content {
  max-width: 1000px;
  margin: 0 auto;
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.announcement-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.announcement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  background-color: #f9f9f9;
}

.announcement-card-content {
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
}

.announcement-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(139, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
}

.announcement-icon i {
  color: #8B0000;
  font-size: 1.5rem;
}

.announcement-info {
  flex: 1;
  min-width: 0;
}

.announcement-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-date {
  color: #909399;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.announcement-preview {
  color: #606266;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.announcement-arrow {
  margin-left: 1rem;
  color: #c0c4cc;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.announcement-card:hover .announcement-arrow {
  color: #8B0000;
  transform: translateX(3px);
}

/* 分页控件样式 */
.pagination-container {
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 2rem;
}

/* 骨架屏样式 */
.announcements-loading {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.skeleton-announcement-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
}

.skeleton-announcement-content {
  display: flex;
  align-items: flex-start;
}

.skeleton-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e0e0e0;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.skeleton-info {
  flex: 1;
}

.skeleton-title {
  width: 60%;
  height: 24px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 0.8rem;
}

.skeleton-date {
  width: 30%;
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 0.8rem;
}

.skeleton-preview {
  width: 100%;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 4px;
}

/* 无数据样式 */
.no-announcements {
  text-align: center;
  padding: 5rem 0;
  color: #909399;
}

.no-announcements i {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
}

.no-announcements p {
  font-size: 1.2rem;
}

/* 公告详情对话框样式 */
.announcement-dialog-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}

.announcement-dialog-date {
  color: #909399;
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.announcement-dialog-date i {
  margin-right: 5px;
  color: #8B0000;
}

.announcement-dialog-body {
  line-height: 1.8;
  white-space: pre-line;
  color: #303133;
  font-size: 1.1rem;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

/* 加载动画样式 */
.announcement-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.announcement-loading-spinner {
  font-size: 2rem;
  color: #8B0000;
  margin-bottom: 15px;
}

.announcement-loading-text {
  color: #909399;
  font-size: 1rem;
}

/* 骨架屏脉动动画 */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.skeleton-title, .skeleton-date, .skeleton-preview, .skeleton-icon {
  animation: pulse 1.5s infinite ease-in-out;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: pulse-bg 1.5s infinite;
}

@keyframes pulse-bg {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .announcements-container {
    padding: 2rem 5%;
  }
  
  .page-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .announcement-card-content {
    flex-direction: column;
  }
  
  .announcement-icon {
    margin-bottom: 1rem;
    margin-right: 0;
  }
  
  .announcement-arrow {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .announcements-container {
    padding: 2rem 3%;
  }
  
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-description {
    font-size: 1rem;
  }
}
</style> 